/* custom-tab-bar/index.wxss */
.custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  padding-top: 10rpx;
  bottom: 0;
  width: 100%;
  border-top: 1rpx solid #eeeeee;
  padding-bottom:calc(env(safe-area-inset-bottom) / 2);
  // box-sizing: border-box;
  // &::after{
  //   content: '';
  //   position: absolute;
  //   width: 50rpx;
  //   height: 50rpx;
  //   background-color: #fff;
  //   border-radius: 50%;
  //   left: 224px;
  //   top: -50rpx;
  // }
  // &::before{
  //   content: '';
  //   position: absolute;
  //   width: 50rpx;
  //   height: 50rpx;
  //   background-color: red;
  //   border-radius: 50%;
  //   left: 280rpx;
  //   top: -50rpx;
  //   z-index: 99;
  // }
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-icon {
  width: 40rpx;
  height: 40rpx;
}

.tab-text {
  margin-top: 5px;
  font-size: 22rpx;
  color: #999999;
}

.tab-text.active {
  color: #CAAB61;
}

.circle{
  background-color: pink;
  transform: translateY(-50rpx);
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
    &::before{
      // content: '';
      position: absolute;
      width: 50rpx;
      height: 50rpx;
      background-color: black;
      border-radius: 100%;
      left: 105rpx;
      top: 25rpx;
    }
    &::after{
      content: '';
      right: -28rpx;
      top: 40rpx;
      position: absolute;
      width: 50rpx;
      height: 50rpx; 
      background-color: pink;
      border-radius: 100%;
    }
  .tab-text {
    margin-top: unset;
    font-size: 30rpx;
    color: #ffffff;
    width: 60rpx;
    z-index: 99;
  }
}